<template>
	<div class="city-search">
		<div class="search">
			<input 
				v-model="keyword" 
				class="search-input" 
				type="text" 
				placeholder="输入城市名或拼音" />
		</div>
		<div 
			class="search-content" 
			v-show="keyword"
			ref="search"
			> 
			<!-- 
                只有在用户输入了关键字后才显示search-content，另外提供ref,以便于获取当前容器将其使用better-scroll,
                因为search-content overflow hidden
             -->
			<ul>
				<li 
					class="search-item border-bottom"
					v-for="item in list"
					v-bind:key="item.id"
					v-on:click="handleCityClick(item.name)"
				>{{item.name}}</li>	
				<li class="search-item border-bottom" v-show="list.length==0">
		        	没有找到匹配数据
		        </li>			
			</ul>
		</div>
	</div>
</template>

<script type="text/javascript">
	import {mapGetters,mapActions} from 'vuex'
	import Bscroll from 'better-scroll'
	export default{
		name:"CitySearch",
		props:['cities'],
		data () {
			return {
                msg:"",
				keyword:"",
				list:[],               //list默认为空表示没有匹配的城市
				timer:null
			}
		},
		watch:{  
			/**
			 *	老师这里用watch监视keyword变化不知何意，另外keyword变化不是连续的过程,我虽然不太能理解但是用一下也没有不好。
			 *		第二点：要理解老师这里的业务处理：当用户输入关键字时，利用关键字到父数据中查找匹配的城市名字，
			 *		再将选中的城市作为本组件的数据。
			 */
			keyword(newValue,oldValue){				
				if (this.timer) {
	        		window.clearTimeout(this.timer)
	      		}
			    if (!this.keyword) {
			        this.list = []
			        return
			    }
			    this.timer = setTimeout(() => {
			        const result = []
			        for (let i in this.cities) {
			          	this.cities[i].forEach((value) => {
			            	if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
			              		result.push(value)
			            	}
			          	});
			        }
			    	this.list = result
			    }, 100);
			  
			}
		},
		methods:{
			//业务方法：当点击热门城市或者所有城市中的城市列表时将传入的城市名修改为
			//	当前城市,同时模拟用户点击触发路由
			handleCityClick(city){
				this.setCity(city);
				this.$router.push("/")
			},
			...mapActions(['setCity'])
		},
		mounted () {
    		this.scroll = new Bscroll(this.$refs.search)
  		}
	}
</script>

<style type="text/css" scoped>
	.search{
		height: 0.72rem;padding:0 0.1rem;background-color:  #00bcd4;
	}
	.search .search-input{
		box-sizing: border-box;width: 100%;height: 0.62rem;position: 0.1rem;
		line-height: .62rem;text-align: center;border-radius: 0.06rem;
		color: #666;
	}
	/* 
	 * search-content的位置与城市列表位置重叠，search-content z-index更高，会覆盖citylist
	 *	但是他是响应式展示，只有search input中有模糊匹配的搜索内容时才显示，老师的设计技巧还是很强的
     *  这里vue组件化写法search-content与city list不在同一个组件中，这是比较让人误解的地方    		
	 */	
	.search-content{
		z-index: 100;
		overflow: hidden;
		position: absolute;
		top: 1.58rem;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #eee;
	}
	.search-content .search-item{
		line-height: .62rem;
    	padding-left: .2rem;
      	background: #fff;
      	color: #666;
	}
</style>